<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script src="//cdn.bootcss.com/jquery/3.0.0-rc1/jquery.js"></script>
<body>
<h2>Hello World!</h2>

<div id="echo" style="margin: 0 auto; width: 500px;height: 500px;overflow: scroll;border: 1px solid;">

</div>
<div style="margin: 0 auto;width: 500px;">
	发送内容：<textarea id="content" style="width: 500px;height: 100px;"></textarea>
	发给谁：<input id="user" />
	<button id="sendBtn">发送</button>
</div>

</body>
<script type="text/javascript">
	var ws = new WebSocket("ws://localhost:8080/Git/server");
	
	ws.onmessage=function(msg){
		var div = $("<div/>");
		var message = JSON.parse(msg.data);
		console.log(message);
		if(message.to =='all'){
			div.html(message.from+"：" + message.content);
		}else{
			div.html("游客" + message.from+"对你说：" + message.content);
		}
		$("#echo").append(div);
	}
	
	$("#sendBtn").on("click",function(){
		var content = $("#content").val();
		var user = $("#user").val();
		var msg = {};
		msg.to=user;
		msg.content=content;
		ws.send(JSON.stringify(msg));
	});
</script>
</html>
